<template>
    <div>
        <div class="wrapper-md">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/app' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>产品服务</el-breadcrumb-item>
                <el-breadcrumb-item>Redis</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="wrapper-md no-padding-b">
            <el-form :inline="true" :model="formInline" class="demo-form-inline"  label-width="80px">
                <el-form-item label="审批人">
                    <el-input v-model="formInline.user" placeholder="审批人"></el-input>
                </el-form-item>
                <el-form-item label="审批人">
                    <el-select v-model="formInline.region" placeholder="活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="活动时间">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="formInline.date1" style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2" style="text-align: center;">-</el-col>
                    <el-col :span="11">
                        <el-time-picker type="fixed-time" placeholder="选择时间" v-model="formInline.date2" style="width: 100%;"></el-time-picker>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class="wrapper-md no-padding-b">
            <el-button type="primary" icon="loading" size="small">刷新</el-button>
            <el-button type="info" icon="plus" size="small">新建实例</el-button>
            <el-button type="warning" icon="setting" size="small">管理</el-button>
            <el-button type="success" icon="edit" size="small">编辑</el-button>
            <el-button type="danger" icon="delete2" size="small">删除</el-button>
        </div>

        <div class="wrapper-md">
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        inline-template
                        label="日期"
                        width="200">
                    <div>{{ row.date }}</div>
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="地址"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        :context="_self"
                        inline-template
                        label="操作"
                        width="150">
                    <div style="text-align: center">
                        <el-button
                                size="small"
                                @click="handleEdit($index, row)">
                            编辑
                        </el-button>
                        <el-button
                                size="small"
                                type="danger"
                                @click="handleDelete($index, row)">
                            删除
                        </el-button>
                    </div>
                </el-table-column>
            </el-table>

            <!--分页-->
            <el-row class="wrapper-md">
                <el-col :span="10" :offset="14">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage4"
                            :page-sizes="[100, 200, 300, 400]"
                            :page-size="100"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="400">
                    </el-pagination>
                </el-col>
            </el-row>
        </div>

    </div>
</template>
<style>

</style>
<script>

    export default{
        data(){
            return{
                tableData: [{
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-08',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-06',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-07',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-08',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-08',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-06',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-07',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-06',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }],
                multipleSelection: [],
                currentPage4: 4,
                formInline: {
                    user: '',
                    region: '',
                    date1: '',
                    date2: ''
                }
            }
        },
        methods: {
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                console.log(`当前页: ${val}`);
            },
            onSubmit() {
                console.log('submit!');
            }
        }
    }
</script>
